<template>
  <!-- 关于我们， id用来导航菜单跳转 -->
  <section id="about-us" class="about-us">
    <!-- 标题 -->
    <h2 class="title1">关于我们</h2>
    <!-- 补充说明区域 -->
    <p class="intro">
      网络公司不仅仅是提供域名注册、空间租用、网站开发、网站建设与网络营销活动策划相关的企业组织。
    </p>
    <!-- 公司业务容器，栅格布局 -->
    <div class="features">
      <div class="feature" v-for="(item, index) in list" :key="index">
        <i class="fas" :class="item.icon"></i>
        <h4 class="feature-title">{{ item.title }}</h4>
        <p class="feature-content">{{ item.content }}</p>
      </div>
    </div>
  </section>
</template>

<script>
import mock from "@/mock/index.js";
export default {
  props: [],
  data() {
    return {
      list: [],
      staggeringOption: {
        delay: 300,
        distance: "50px",
        duration: 500,
        easing: "ease-in-out",
        origin: "bottom"
      }
    };
  },
  mounted() {
    this.list = mock.aboutusdata();
    // extenddataL aboutusdata
    // console.log("mock.extenddata(): ", mock.extenddata());
    this.$nextTick(() => {
      this.$sr.reveal(".feature", { ...this.staggeringOption, interval: 500 });
    });
  }
};
</script>

<style lang="scss" scoped>
@import "@/scss/_variables.scss";

/* 所有section都按grid布局 */
section {
  display: grid;
  padding: 0 80px;
  max-width: 1180px;
  /* 单元格都居中对齐 */

  justify-items: center;
}

/* 区域大标题 */
.title1 {
  color: $text-color-darker;
  /* justify-self: center; */
  /* position: relative; */
  font-size: 34px;
}
/* 大标题下方红线 */
.title1::after {
  display: block;
  margin-top: 14px;
  width: 80%;
  height: 4px;
  background-color: $primary-color;
  content: "";
  transform: translateX(10%);
}

/* 大d标题下方简介 */
.intro {
  margin: 28px 0 60px 0;
  color: $text-color-dark-gray;
  font-size: 18px;
}

/* 区域背景色，因为区域有最大宽度限制，用before来设置占满浏览器宽度 */
.section-bg {
  position: relative;
}

.section-bg::before {
  position: absolute;
  z-index: -1;
  display: block;
  width: 100vw;
  height: 100%;
  background-color: #f9fbfb;
  content: "";
}

/* ============= 关于我们 ================== */
/* 关于我们 */
.about-us {
  margin: auto;
  padding-top: 32px;
  padding-bottom: 32px;
  width: 100vw;
}

/* 公司业务布局 */
.features {
  display: grid;
  align-items: center;
  column-gap: 4vw;
  // 列设置

  grid-template-columns: repeat(3, 1fr);
  // 行设置
  grid-template-rows: 146px 146px;
}

/* 业务 */
.feature {
  display: grid;
  // margin: 20px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.06);
  /* 每列的宽度，第一列60象素，第二列占满剩余空间 */

  grid-template-columns: 60px 1fr;
  /* 行之间的分配  标题一份  内容3份*/
  grid-template-rows: 1fr 3fr;
  grid-template-areas:
    "icon title"
    "icon content";

  i.fas {
    align-self: center;
    color: $primary-color;
    font-size: 34px;

    grid-area: icon;
  }
  &-title {
    color: $text-color-darker;
    font-size: 18px;

    grid-area: title;
  }
  &-content {
    margin-top: 8px;
    color: $text-color-gray;

    grid-area: content;
  }
}
// /* 响应式设置 由大到小 */

// @media (max-width: 1100px) {

// }
// /* 小于992象素时 */
// @media (max-width: 992px) {
// }

// /* 小于768象素时 */
@media (max-width: 768px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

// /* 小于576象素 */
@media (max-width: 576px) {
  .features {
    grid-template-columns: repeat(1, 1fr);
  }
}
</style>
